import { Directive, Input, ElementRef, HostListener } from '@angular/core';
import * as $ from 'jquery';
@Directive({
  selector: '[appMyScroll]'
})
export class MyScrollDirective {
  private  startX=0;
  private  startY=0;
  private obj:any;

  @Input('appMyScroll') param:string;//定义参数
  constructor(public el:ElementRef) { 
    this.obj=$(this.el.nativeElement);  //获取目标的对象
  }

  @HostListener('touchstart',['$event'])
  ontouchstart(e){
      this.startX=e.changedTouches[0].pageX;
      this.startY=e.changedTouches[0].pageY;
  }
 
  @HostListener('touchmove',['$event'])
  ontouchmove(e){
      let x=e.changedTouches[0].pageX-this.startX;
      let y=e.changedTouches[0].pageY-this.startY;
      if(Math.abs(x) > Math.abs(y)){
         var currentScroll = this.obj.scrollLeft();
         this.obj.scrollLeft(parseInt(currentScroll)-x);//滑动的距离
         e.preventDefault(); 
         e.stopPropagation();
      }else if( Math.abs(y) > Math.abs(x)){ //上下滑动
        var currentScroll = this.obj.scrollTop();
        this.obj.scrollTop(parseInt(currentScroll)-y);//滑动的距离
        e.preventDefault(); 
        e.stopPropagation();
      }
  }

 

}
